import React,{useEffect} from 'react';
import homeStyle from './home.module.scss';
import {observer} from 'mobx-react-lite';
import useInject from '../../../hooks/useInject';
import moment from 'moment';

interface OptionIter{
    title:string,
    size:number
}

interface UserInfo{
    "phone": string,
    "username": string,
    "id": string
}

interface VoteItem{
    "select": OptionIter[],
    "info": null,
    "title": string,
    "id": string,
    "endtime":string,
    "uid": string,
    "createVoteUserInfo": UserInfo,
    "size": number,
    "selected": null | number
}

function diff(time:string){
    //现在的时间  结束的时间 > 0 过期
    return moment(new Date()).diff(moment(time)) < 0  //没有过期
}

const Home:React.FC = observer(function(){

    let {Vote} = useInject();

    useEffect(() => {
        //获取投票列表
        Vote.getVoteList();
    },[])

    //投票
    let choose = (selected:number | null,endtime:string,vid:string,ind:number) => {
        //1.已投票不能再投 2.结束不能投
        if(selected !== null || !diff(endtime)){ //过期
            alert('不能投')
            return;
        }
        //投票
        Vote.sendselect({vid,selected:ind+''})
    }

    return <div className={homeStyle['home-wrap']}>
        <header className={homeStyle['home-head']}>
            <h4>热门投票</h4>
        </header>
        <div className={homeStyle["home-con"]}>
            {Vote.voteList && Vote.voteList.map((item:VoteItem) => <div key={item.id} className={homeStyle['select-item']}>
                    <dl>
                        <dt></dt>
                        <dd>{item.createVoteUserInfo.username}</dd>
                    </dl>
                    <h2>{item.title}</h2>
                    <div className={homeStyle['select-con']}> 
                        <span>{item.info}</span>
                        <ul className={`${item.selected !==null ? homeStyle['my-select'] : ''}`}>
                            {
                                //1.投票是否结束 如果结束，添加end类 2.判断该选项是否投过票，投的选项，添加my-select,否则不添加
                                item.select.map((v,ind) => <li key={ind} className={`${item.selected !==null && item.selected === ind ? homeStyle['my-selected'] : ''} ${homeStyle['select-option']} ${diff(item.endtime) ? '':homeStyle['end']} `} 
                                onClick={choose.bind(null,item.selected,item.endtime,item.id,ind)}
                                >
                                    <span className={homeStyle['title']}>{v.title}</span>
                                    <span className={`${homeStyle['select-count']} `} style={{width:v.size/item.size*100+'%'}}></span>
                                    <b className={homeStyle['count']}>{v.size}</b>
                                </li>)
                            }
                        </ul>
                    </div>
                    <div>
                    <span>{item.size}人参与</span>
                    <span>{item.createVoteUserInfo.username}创建</span>
                </div>
            </div>)}
            
        </div>
    </div>
})

export default Home